import React from 'react';
import './mydesignTop.css'
import type { BadgeProps, CalendarProps } from 'antd';
import { Badge, Calendar, ConfigProvider } from 'antd';
import type { Dayjs } from 'dayjs';
// 引入中文
import locale from 'antd/lib/locale/zh_CN';

const getListData = (value: Dayjs) => {
  let listData: { type: string; content: string }[] = []; // Specify the type of listData
  switch (value.date()) {
    case 1:
      listData = [
        { type: 'error', content: '国庆节' },
        { type: 'success', content: '十月你好' },
      ];
      break;
    case 4:
      listData = [
        { type: 'warning', content: '世界动物日' },
      ];
      break;
    case 5:
      listData = [
        { type: 'warning', content: '世界教师日' },
      ];
      break;
    case 8:
      listData = [
        { type: 'success', content: '寒露' },
      ];
      break;
    case 9:
      listData = [
        { type: 'warning', content: '世界邮政日' },
      ];
      break;
    case 10:
      listData = [
        { type: 'warning', content: '辛亥革命纪念日' },
        { type: 'warning', content: '世界精神卫生日' },
      ];
      break;
    case 11:
      listData = [
        { type: 'error', content: '重阳节' },
      ];
      break;
    case 13:
      listData = [
        { type: 'warning', content: '世界保健日' },
      ];
      break;
    case 14:
      listData = [
        { type: 'success', content: '葡萄酒情人节' },
      ];
      break;
    case 15:
      listData = [
        { type: 'warning', content: '国际盲人节' },
      ];
      break;
    case 16:
      listData = [
        { type: 'warning', content: '世界粮食节' },
      ];
      break;
    case 23:
      listData = [
        { type: 'success', content: '霜降' },
      ];
      break;
    case 24:
      listData = [
        { type: 'warning', content: '联合国日' },
        { type: 'warning', content: '程序员节' },
      ];
      break;
    case 25:
      listData = [
        { type: 'warning', content: '抗美援朝纪念日' },
      ];
      break;
    case 26:
      listData = [
        { type: 'warning', content: '中国环卫工人节' },
      ];
      break;
    default:
  }
  return listData || [];
};

const getMonthData = (value: Dayjs) => {
  if (value.month() === 8) {
    return 817;
  }
};
/***************************************************************************************/
const Index: React.FC = () => {
  // 1获取当前日期
  const currentDate = new Date();
  // 2获取年份
  const year = currentDate.getFullYear();
  // 3获取月份
  const month = String(currentDate.getMonth() + 1).padStart(2);
  // 4获取日期
  const day = String(currentDate.getDate()).padStart(2, '0');

  /************************************************************************************/
  const monthCellRender = (value: Dayjs) => {
    const num = getMonthData(value);
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
      </div>
    ) : null;
  };

  const dateCellRender = (value: Dayjs) => {
    const listData = getListData(value);
    return (
      <div className="events">
        {listData.map((item) => (
          <a href='/templatecenter' key={item.content}>

            <Badge status={item.type as BadgeProps['status']} text={item.content} />
          </a>
        ))}
      </div>

    );
  };

  const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
    if (info.type === 'date') return dateCellRender(current);
    if (info.type === 'month') return monthCellRender(current);
    return info.originNode;
  };

  return (
    <div className='mydesignTopBox'>
      <div className="mydesignLeft">
        <div className='mydesignLeft1'><p>低至<span>3.8</span>元/天</p><button>开通会员</button></div>
        <div className='mydesignLeft2'><p>开通会员，全场模版免费用</p><p>查看会员特权</p></div>
      </div>
      {/* 日历 */}
      <div className="mydesignRight">
        <div className="mydesignRight1">
          <div className="mydesignRightSelect">
            <div className="RL">
              <div className="Day">
                {day}/
              </div>
              <div className="Month">{month}</div>
              <div className="year">{year}</div>
            </div>
            <div className="NL">
              <p>周一 农历 八月二十一</p>
            </div>
            <div className="Calendar">
              <div className="CalendarBox">
                <div className="Calendar1">
                  {/* 渲染日历 */}
                  <ConfigProvider locale={locale}>
                    <Calendar cellRender={cellRender} />
                  </ConfigProvider></div>
                <div className="Calendar2">
                  <div className="CalendarTitle">
                    <h3>营销模版直通车</h3>
                  </div>
                  <div className="CalendarCon">
                    <div className="festivaBOX">
                      <div className='festiva1'><p>9月27日</p><p>剩<span>3</span>天</p></div>
                      <div className='festiva2'><h2></h2><p>世界旅游日</p></div>
                    </div>
                    <div className="festivaBOX">
                      <div className='festiva1'><p>9月28日</p><p>剩<span>5</span>天</p></div>
                      <div className='festiva2'><h2></h2><p>孔子文化节</p></div>
                      <div className='festiva2'><h2></h2><p>世界狂犬病日</p></div>
                    </div>
                    <div className="festivaBOX">
                      <div className='festiva1'><p>9月29日</p><p>剩<span>6</span>天</p></div>
                      <div className='festiva2'><h2></h2><p>世界心脏日</p></div>
                    </div>
                    <div className="festivaBOX">
                      <div className='festiva1'><p>9月29日</p><p>剩<span>7</span>天</p></div>
                      <div className='festiva2'><h2></h2><p>中国烈士纪念日</p></div>
                    </div>
                    <div className="festivaBOX">
                      <div className='festiva1'><p>10月1日</p><p>剩<span>8</span>天</p></div>
                      <div className='festiva2'><h2></h2><p>国庆节</p></div>
                      <div className='festiva2'><h2></h2><p>十月您好</p></div>
                    </div>
                    <div className="festivaBOX">
                      <div className='festiva1'><p>10月4日</p><p>剩<span>11</span>天</p></div>
                      <div className='festiva2'><h2></h2><p>世界动物日</p></div>
                    </div>
                    <div className="festivaBOX">
                      <div className='festiva1'><p>10月5日</p><p>剩<span>12</span>天</p></div>
                      <div className='festiva2'><h2></h2><p>世界教室日</p></div>
                    </div>
                    <div className="festivaBOX">
                      <div className='festiva1'><p>10月8日</p><p>剩<span>15</span>天</p></div>
                      <div className='festiva2'><h3></h3><p>寒露</p></div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div className="mydesignRightSJ">
            <img src="	https://pub-cdn-oss.chuangkit.com/ad_position/a4e7e6b04bbb46fca122b0e3418155a4" alt="" /><p>国庆节</p>
          </div>
        </div>
        <div className="mydesignRight2">
          <a href='/templatecenter'><img src="https://www.eqxiu.com/workbench/img/bell-f.e9592741.svg" alt="" /><p>【{year}/{month}/{day}更新】喜迎国庆,大额立减券限时领{'>>'}</p></a>
          <a href='/templatecenter'><img src="https://www.eqxiu.com/workbench/img/bell-f.e9592741.svg" alt="" /><p>【一举两得】H5作品一键转视频,节日祝福传播更多样{'>>'}</p></a>
        </div>
      </div>
    </div>
  )
}

export default Index